<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Registro de Publicación</title>
	
	<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
	<!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        
    <script src="https://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="js/plupload.full.min.js"></script>

	<script type="text/javascript">

		$(document).ready(function(){
	        $("#cbxCategoria").load("CategoriaServlet");
	    });
	    
	    function showSubCategorias() {
            //obtiene los objetos productCode, 
            var code=$("#cbxCategoria").val(); //.. y se obtiene el valor
            //llama al servlet con el parametro seleccionado
            $("#subCategoria").load("CategoriaServlet", {categoriaCode:code});
        }
	
	</script>
	
</head>

<body>
	
		<% if(request.getAttribute("MENSAJE") != null &&
		
			request.getParameter("MENSAJE") != "") { %>
		
			<script type="text/javascript">
				var mensaje = "<%=request.getAttribute("MENSAJE")%>";
				alert(mensaje);
			</script>
		
		<%}%>
	

    <div class="container">
    
    	<div class="row clearfix">
			<div class="col-md-20 column">			
			
			  <!-- Static navbar -->
			  <div class="navbar navbar-default navbar-static-top">
			    <div class="container">
			      <div class="navbar-header">
			        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			        </button>
			        <a class="navbar-brand" href="index.jsp">Principal</a>
			      </div>
			      <div class="navbar-collapse collapse">
			        <ul class="nav navbar-nav">	        
						<li class="active"><a href="principalUsuario.jsp">Inicio</a></li>
						<li class="dropdown">
						<li><a href="MantenimientoDePublicacion.jsp">Publicaciones</a></li> <!--  Cambio relizado se quito  LogoutServlet-->
			            <li><a href="LogoutServlet">Salir</a></li>
			        </ul>
			      </div><!--/.nav-collapse -->
			    </div>
			  </div>
			
							
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							Nueva publicacion
						</h3>
					</div>
					<div class="panel-body">

						<div style="padding: 10px; margin:0 auto; width: 600px;">
					      
					      <form class="form-horizontal" role="form" id="formPublicacion" action="PublicacionServlet?accion=procesaPublicacion" method="post">
					      
					        <fieldset class="control-group error">
					          <legend>Datos de publicacion</legend>
					          
					          
					          <div class="form-group">
					            <label for="cbxCategoria" class="col-sm-4 control-label">Categoria (*)</label>
					            <div class="col-sm-8">
					              <select class="form-control" id="cbxCategoria" name="subCategoria" onchange="showSubCategorias()">
					              </select>
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="cbxSubCategoria" class="col-sm-4 control-label">Sub-Categoria (*)</label>
					            <div class="col-sm-8">
					              <select class="form-control" id="subCategoria" name="subCategoria">                
					        		<option value=0>Seleccione categoria</option>
					              </select>
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="inputTitulo" class="col-sm-4 control-label">Titulo (*)</label>
					            <div class="col-sm-8">
					              <input type="text" class="form-control" id="inputTitulo" name="titulo" placeholder="Ingrese titulo">
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="taDescripcion" class="col-sm-4 control-label">Descripcion (*)</label>
					            <div class="col-sm-8">
					              <textarea class="form-control" rows="3" name="descripcion" id="taDescripcion" ></textarea>
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="radCondicion" class="col-sm-4 control-label">Condicion (*)</label>
					            <div class="col-sm-8">
					              <div class="radio">
					                <label>
					                  <input type="radio" name="condicion" id="optionsRadios1" value="N" checked>
					                  Nuevo
					                </label>
					              </div>
					              <div class="radio">
					                <label>
					                  <input type="radio" name="condicion" id="optionsRadios2" value="U">
					                  Usado
					                </label>
					              </div>
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="inputCantidad" class="col-sm-4 control-label">Cantidad (*)</label>
					            <div class="col-sm-8">
					              <input type="number" class="form-control" id="inputCantidad" name="cantidad" placeholder="Cantidad">
					            </div>
					          </div>
					          <div class="form-group">
					            <label for="inputPrecio" class="col-sm-4 control-label">Precio (*)</label>
					            <div class="col-sm-8">
					              <div class="input-group">
					                <span class="input-group-addon">S/.</span>
					                <input type="text" id="inputPrecio" class="form-control" placeholder="Ingrese precio" name="precio">
					              </div>
					            </div>
					          </div>
					          
					          <div class="form-group">
					            <label for="inputDuracion" class="col-sm-4 control-label">Duracion (*)</label>
					            <div class="col-sm-8">
					              <input type="number" class="form-control" id="inputDuracion" placeholder="Ingrese duracion" name="duracion">
					            </div>
					          </div>
					          
					          <div class="form-group">
					          
					          	<label for="inputDuracion" class="col-sm-4 control-label"></label>
					            <div class="col-sm-8">
					            
					            	<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
									<br />
									
						          	<div id="container">
									    <a id="pickfiles" href="javascript:;">[Select files]</a> 
									    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
									</div>
									
									<br />
									<pre id="console"></pre>
									
									<script type="text/javascript">
									// Custom example logic
									
									var uploader = new plupload.Uploader({
										runtimes : 'html5,flash,silverlight,html4',
										browse_button : 'pickfiles', // you can pass in id...
										container: document.getElementById('container'), // ... or DOM Element itself
										url : 'PublicacionServlet?accion=cargaImagen',
										flash_swf_url : 'js/Moxie.swf',
										silverlight_xap_url : 'js/Moxie.xap',
										
										filters : {
											max_file_size : '10mb',
											mime_types: [
												{title : "Image files", extensions : "jpg,gif,png"}
											]
										},
									
										init: {
											PostInit: function() {
												document.getElementById('filelist').innerHTML = '';
									
												document.getElementById('uploadfiles').onclick = function() {
													uploader.start();
													return false;
												};
											},
									
											FilesAdded: function(up, files) {
												plupload.each(files, function(file) {
													document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
												});
											},
									
											UploadProgress: function(up, file) {
												document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
											},
									
											Error: function(up, err) {
												document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
											}
										}
									});
									
									uploader.init();
									
									</script>
					              
					            </div>
					          
					          </div>
					          
					          
					          <div class="form-group">
					            <label for="inputPassword3" class="col-sm-4 control-label"></label>
					            <div class="col-sm-8">
					              <button type="submit" class="btn btn-primary">Publicar</button>
					              <button onclick="window.location='MantenimientoDePublicacion.jsp' " type="button" class="btn btn-danger">Cancelar</button>

					              
					            </div>
					          </div>
					        </fieldset>
					      </form>
					
					    </div>

						
					</div>
					<div class="panel-footer">
						<p>&copy; Pascal 2014</p>
					</div>
				</div>
			</div>
		</div>		

    </div> <!-- /container -->	
	
	<script src="js/bootstrap.min.js"></script>
	

</body>
</html>